import {
    View, ScrollView, Dimensions, RefreshControl, TouchableOpacity,
    TouchableHighlight, Text, StyleSheet, Image, Alert
} from 'react-native';
import React, {Component} from 'react';
import Urls, {getRealUrl} from '../const/Urls'
import LocalImg from '../const/Images'
import moment from 'moment'

const {width, height} = Dimensions.get("window");

class PageCkjlDetail extends Component {

    constructor(props) {
        super(props);
        this.model = this.props.navigation.getParam('model');
    }


    processDateTime(date) {
        const m = moment(date)
        if (m.isValid()) {
            return m.format('DD/HHmm')
        } else
            return ""
    }


    render() {
        return (
            <View style={{
                width: width,
                height: height,
                flexDirection: 'column',
                backgroundColor: '#ffffff',
                paddingBottom: 20
            }}>
                {this.renderHeader()}
                {this.renderBody()}
            </View>


        )
    }


    renderHeader() {
        const model = this.model;
        return (<View style={{
            flexDirection: 'row',
            flex: 0,
            height: 60,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: '#0066FF'
        }}>
            <View style={{flex: 1, padding: 10}}>
                <TouchableOpacity onPress={() => this.props.navigation.pop()}>
                    <Image source={LocalImg['backImg']}
                           style={{height: 30, width: 30, resizeMode: 'contain'}}/>
                </TouchableOpacity>
            </View>
            <View style={{flex: 3, justifyContent: 'center', alignItems: 'center'}}>
                <Text style={{fontSize: 20, color: '#ffffff'}}>{model.VCVESCNAME}</Text>
            </View>
            <View style={{flex: 1, alignItems: 'flex-end', padding: 10}}>
            </View>
        </View>)
    }


    renderBody() {
        const model = this.model;
        return (
            <ScrollView style={{backgroundColor: '#fffff0', paddingTop: 10, height: height - 80}}>
                <View style={{flexDirection: 'column', marginBottom: 10}}>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Text style={styles.text}>中文船名</Text>
                            <Text style={styles.text}>{model.VCVESCNAME}</Text>
                        </View>
                        <View style={styles.cell}>
                            <Text style={styles.text}>英文船名</Text>
                            <Text style={styles.text}>{model.VCVESENAME}</Text>
                        </View>
                    </View>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Text style={styles.text}>船籍</Text>
                            <Text style={styles.text}>{model.VCNATIONNAME}</Text>
                        </View>
                        <View style={styles.cell}>
                            <Text style={styles.text}>船型</Text>
                            <Text style={styles.text}>{model.BOATTYPE}</Text>
                        </View>
                    </View>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Text style={styles.text}>呼号</Text>
                            <Text style={styles.text}>{model.CHCALLNO}</Text>
                        </View>
                        <View style={styles.cell}>
                            <Text style={styles.text}>长度</Text>
                            <Text style={styles.text}>{model.NMVESLENGTH}</Text>
                        </View>
                    </View>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Text style={styles.text}>高度</Text>
                            <Text style={styles.text}>{model.NMLGHEIGHT}</Text>
                        </View>
                        <View style={styles.cell}>
                            <Text style={styles.text}>宽度</Text>
                            <Text style={styles.text}>{model.NMVESWIDTH}</Text>
                        </View>
                    </View>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Text style={styles.text}>载重吨</Text>
                            <Text style={styles.text}>{model.INSUMMERWEIGHTTON}</Text>
                        </View>
                        <View style={styles.cell}>
                            <Text style={styles.text}>船舶总吨</Text>
                            <Text style={styles.text}>{model.INVESSELTOTALTON}</Text>
                        </View>
                    </View>
                    <View style={styles.row}>
                        <View style={styles.cell}>
                            <Text style={styles.text}>船舶净重</Text>
                            <Text style={styles.text}>{model.INVESSELNETTON}</Text>
                        </View>
                        <View style={styles.cell}>
                            <Text style={styles.text}>备注</Text>
                            <Text style={styles.text}>{model.VCMEMO}</Text>
                        </View>
                    </View>
                </View>
            </ScrollView>
        )
    }


    judgeYN(data, yes = '是', no = '否', expect = '1') {
        if (data === expect) {
            return yes
        } else {
            return no
        }
    }


}

const styles = StyleSheet.create({
    phone: {
        flex: 1,
        textDecorationLine: 'underline',
        color: '#0066FF',
    },
    card: {
        borderRadius: 10,
        borderWidth: 1,
        borderStyle: 'solid',
        borderColor: '#CCCCCC',
        flexDirection: 'column',
        backgroundColor: '#ffffff',
        marginLeft: 5,
        marginRight: 5,
        marginBottom: 10
    },
    row: {
        flexDirection: 'row',
        borderBottomWidth: 0.5,
        borderStyle: 'solid',
        borderBottomColor: '#CCCCCC',
        backgroundColor: '#ffffff',
        padding: 10,
        marginLeft: 10,
        marginRight: 10
    },
    lastRow: {
        flexDirection: 'row',
        padding: 10,
        marginLeft: 10,
        marginRight: 10,
        overflow: 'visible'
    },
    cell: {
        flex: 1,
        flexDirection: 'row'
    },
    text: {
        flex: 1
    },
    textContent: {
        flex: 1,
        color: 'black'
    }
});


export default PageCkjlDetail;